﻿@page "/"
@inject BlazorQueryDOM DOM

<h1 id="first_h1">Hello, DOM!</h1>
<h1 id="second_h1">Hello, Blazor!</h1>

<button @onclick="TriggerCSS">CSS</button>
<button @onclick="TriggerWidth">Width</button>
<button @onclick="TriggerHeight">Height</button>
<button @onclick="TriggerText">Text</button>
<button @onclick="TriggerFadeOut">FadeOut</button>
<button @onclick="TriggerFadeOutFirst">FadeOutFirst</button>
<button @onclick="TriggerFadeOutSecond">FadeOutSecond</button>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            await DOM.Select("h1").CSS("background-color", "gray");
        }
    }

    async Task TriggerCSS()
    {
        await DOM.Select("h1").CSS("background-color", "red");
    }

    async Task TriggerWidth()
    {
        int width = await DOM.Select("h1").Width();
        await DOM.Select("h1").Width(Convert.ToInt32(width / 2));
    }

    async Task TriggerHeight()
    {
        var height = await DOM.Select("h1").Height();
        await DOM.Select("h1").Height(height * 2);
    }

    async Task TriggerText()
    {
        await DOM.Select("h1").Text("Now this text is changed").CSS("color", "yellow");
    }

    async Task TriggerFadeOut()
    {
        await DOM.Select("h1").FadeOut(async s => { await DOM.Alert("JPP from CS : " + s); });
    }

    async Task TriggerFadeOutFirst()
    {
        await DOM.Select("#first_h1").FadeOut(async s => { await DOM.Alert("JPP from CS : " + s); });
    }

    async Task TriggerFadeOutSecond()
    {
        await DOM.Select("#second_h1").FadeOut(async s => { await DOM.Alert("JPP from CS : " + s); });
    }

}